<template>
  <div class="requirementAnalysis-pack">
    <ele-page
      v-loading="loading"
      :formConfig="searchConfig"
      ref="eleTable"
      :operateList="operateList"
      @handleOperateEvent="handleOperateEvent"
      :column="column"
      :getList="getList"
      uniqueId="mesMaterialRequisitionTable"
      :initForm="otherParams"
      :key="time"
      @handleReset="handleReset"
      @handleSearch="handleSearch"
    >
    </ele-page>
  </div>
</template>

<script>
import { operateList, searchConfig, rowConfig } from "./config";
import { getList, getDateList } from "@/api/material/requirementAnalysis.js";
import dayjs from "dayjs";
export default {
  name: "requirementAnalysis",
  data() {
    return {
      title: null,
      visible: false,
      isLoading: false,
      loading: false,
      time: 1,
      formDataDialog: {},
      searchConfig,
      operateList,
      otherParams: { planTime: [] },
      getList,
      // 列表页字段的绑定配置
      column: [
        {
          type: "index",
          label: $i18n.t("common.order"),

          fixed: "left",
        },
        {
          prop: "wuliao",
          label: $i18n.t("requirementAnalysis.wuliao"),
          width: 510,
          fixed: "left",
          align: "center",
          showOverflowTooltip: true,
          children: [
            {
              prop: "seriesName",
              label: $i18n.t("requirementAnalysis.seriesName"),
              width: 150,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "materialCode",
              align: "center",
              label: $i18n.t("common.materialCode"),
              width: 180,
              showOverflowTooltip: true,
            },
            {
              prop: "materialName",
              align: "center",
              label: $i18n.t("common.materialName"),
              width: 180,
              showOverflowTooltip: true,
            },
          ],
        },
        {
          prop: "xvqiuriqi",
          label: $i18n.t("requirementAnalysis.xvqiuriqi"),
          showOverflowTooltip: true,
          children: [],
        },
      ],
    };
  },
  computed: {},
  methods: {
    handleReset() {
      this.setDate();
      this.getDateList({ searchDateMin: "", searchDateMax: "" });
      this.otherParams.prodName = "";
      this.otherParams.seriesName = "";
      this.otherParams.prodName = "";
      this.otherParams.prodCode = "";
      this.otherParams.seriesCode = "";
      this.refresh();
    },
    handleSearch({ searchDateMin, searchDateMax, ...rege }) {
      this.getDateList({ searchDateMin, searchDateMax });
      this.$set(this.otherParams, "planTime", [searchDateMin, searchDateMax]);
      this.otherParams = { ...this.otherParams, ...rege };
      // this.refresh();
    },
    //设置默认七天
    setDate() {
      this.$set(this.otherParams, "planTime", [
        dayjs().format("YYYY-MM-DD"),
        dayjs().add(7, "day").format("YYYY-MM-DD"),
      ]);
    },

    // 获取列数据
    async getDateList({ searchDateMin, searchDateMax }) {
      let res = await getDateList({
        searchDateMin: searchDateMin || this.otherParams.planTime[0],
        searchDateMax: searchDateMax || this.otherParams.planTime[1],
      });
      this.column.at(-1).children = [];
      res.data.result.map((ite) => {
        this.column.at(-1).children.push({
          prop: ite,
          label: ite,
          minWidth: 140,
          align: "center",
          showOverflowTooltip: true,
          render: (h, scope) => {
            let { needNumber, snNumber, lackNumber } = scope.row[ite];
            return (
              <el-tooltip
                class="item"
                effect="dark"
                content={`${$i18n.t(
                  "requirementAnalysis.needNumber"
                )}:${needNumber},${$i18n.t(
                  "requirementAnalysis.snNumber"
                )}${snNumber},${$i18n.t(
                  "requirementAnalysis.lackNumber"
                )}${lackNumber}`}
                placement="top-start"
              >
                <div>
                  <div class={Number(lackNumber) > 0 ? "color1" : "color2"}>
                    <p>
                      {needNumber}/{snNumber}
                    </p>
                    <p>{lackNumber}</p>
                  </div>
                </div>
              </el-tooltip>
            );
          },
        });
      });

      this.time = new Date().getTime();
      //   this.$refs.eleTable.$refs.xTable.doLayout();
    },
    //表格顶部按钮操作事件
    handleOperateEvent({ handleName, name, rows }) {
      this.title = name;
      const fnc = {};
      fnc[handleName] && fnc[handleName]();
    },
    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset);
    },
  },
  created() {
    this.setDate();
    this.getDateList({ searchDateMin: "", searchDateMax: "" });
  },
};
</script>
<style lang="scss" scoped>
.requirementAnalysis-pack {
  /deep/.color1 {
    color: red;
  }
  /deep/.color2 {
    color: rgb(12, 173, 7);
  }
}
</style>
